lab components / Navigation

Horizontal navigation

A persistent, top-level navigation element that provides quick access to essential site-wide utilities and global actions, and reinforces brand identity.

Examples Properties Guidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { HorizontalNavigation } from "@siteimprove/fancylab";

#Examples

This layout is the standard for Siteimprove products and integrations.

Composition:

Logo: Reinforces brand identity and provides a link back to the homepage.
Actions:Provide quick access to essential system-level actions (e.g., Sign out, Notifications, Profile, Settings, Account switching) through abutton, with a sub-menu (Action Menu) for additional actions if needed. The sub-menu opens on click and closes on selection or by clicking outside.
Skip to content: ( ): The "Skip to content" link allows keyboard users to navigate directly to the main content using the "Tab" key.

CodeHTML output

<HorizontalNavigation
	appLogo={{
		icon: siteImproveLogo,
		href: "https://my2.siteimprove.com",
		alt: "Go to main page",
		"data-observe-key": "top-nav-company-link",
	}}
	actions={[
		{
			items: [
				{
					text: "Users",
					onClick: () => console.log("clicked"),
					"data-observe-key": "top-nav-users",
				},
				ActionMenu.divider,
				{ text: "Sites", href: "https://siteimprove.com", "data-observe-key": "top-nav-sites" },
				{ text: "Groups", href: "https://siteimprove.com", "data-observe-key": "top-nav-groups" },
				ActionMenu.divider,
				{ text: "Report", href: "https://siteimprove.com", "data-observe-key": "top-nav-report" },
				ActionMenu.divider,
				{
					text: "Subscriptions",
					href: "https://siteimprove.com",
					"data-observe-key": "top-nav-subscriptions",
				},
				ActionMenu.divider,
				{
					text: "All settings",
					href: "https://siteimprove.com",
					"data-observe-key": "top-nav-all-settings",
				},
			],
			buttonContent: (
				<Icon>
					<IconSettings />
				</Icon>
			),
			"data-observe-key": "top-nav-settings",
			"aria-label": "Settings",
			tooltip: "Settings",
		},
		{
			items: [
				{
					text: "Help Center",
					onClick: () => console.log("clicked"),
					"data-observe-key": "top-nav-help-center",
				},
				ActionMenu.divider,
				{
					text: "Frontier",
					href: "https://siteimprove.com",
					"data-observe-key": "top-nav-frontier",
				},
				ActionMenu.divider,
				{
					text: "Explore more modules",
					href: "https://siteimprove.com",
					"data-observe-key": "top-nav-explore-more-modules",
				},
			],
			buttonContent: (
				<Icon>
					<IconHelp />
				</Icon>
			),
			"data-observe-key": "top-nav-help",
			"aria-label": "Help and training",
			tooltip: "Help and training",
		},
		{
			items: [
				{
					text: "User Name",
					onClick: () => console.log("clicked"),
					icon: (
						<span style={initialsStyle} aria-hidden="true">
							UN
						</span>
					),
					"data-observe-key": "top-nav-user-name",
				},
				ActionMenu.divider,
				{
					text: "Switch account",
					href: "https://siteimprove.com",
					"data-observe-key": "top-nav-switch-account",
				},
				{
					text: "Sign out",
					href: "https://siteimprove.com",
					"data-observe-key": "top-nav-sign-out",
				},
			],
			buttonContent: (
				<Icon>
					<IconUser />
				</Icon>
			),
			"data-observe-key": "top-nav-profile",
			"aria-label": "Profile",
			tooltip: "Profile",
		},
	]}
	data-observe-key="top-nav"
	skipToContentId="properties"
/>

#Properties

#Guidelines

#Best practices

#Principle

Recognition over recall: The HorizontalNavigation should present familiar options, making it easy for users to find what they need without having to remember specific locations.
Affordances: Icons and labels should clearly communicate their function (e.g. a gear icon for settings).
Consistency: The HorizontalNavigation should maintain a consistent appearance and behavior across all pages and sections.

#General

Use the HorizontalNavigation for essential, high-level actions that users will need frequently throughout their experience.
Prioritize actions that are global in scope (e.g., sign-in, account settings).

#Placement

HorizontalNavigation is typically used in the top of the page, e.g Sitimprove’s platform, CMS plugins, Browser extensions.

#Style

Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your HorizontalNavigation to existing components for visual consistency.
Consider using a "sticky" or fixed position so the bar remains visible as users scroll.
Use clear, recognizable Icons. Pair with a concise Tooltip if space allows.
Use Icon-only buttons for global system-level utilities to reduce visual clutter.

#Do not use when

Actions specific to a page or feature.
The navigation structure is complex and requires multiple levels of sub-menus. Use Side Navigation instead.

#Accessibility

#For designers

Ensure sufficient color contrast between icons, text, and the background.
People with visual impairments may not see the icon at all, so the button's label or aria-label must accurately convey its purpose.

#For developers

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

Link labels:

Keep labels short and actionable (e.g., "Sign out", or "Notifications").
Use sentence case consistently.
Avoid abbreviations and technical jargon.